<template>
  <div class="address-menu" :style="{'width': changeStyle.width + 'px'}">
    <div class="title">
      组织架构
    </div>
    <div class="structure-content" :style="{'width': changeStyle.width + 'px'}">
      <div v-for="(item, index) in structureLists" :key="index" class="contentList" :style="{'width': item.width}">
        <!--部门负责人-->
        <div v-if="item.leader" class="leader">
          <div >
            <div class="leaderLeft">
              <el-popover
                placement="left"
                width="300"
                @show="getBusinessCard(item.leader)"
                trigger="click">
                <div class="businessCard">
                  <div class="businessCardTitle">
                    <div>
                      <p class="name">{{ item.leader.realname }}</p>
                      <p class="address">语祯物联科技(上海)有限公司</p>
                    </div>
                    <div class="leaderImg"><span>{{ item.leader && item.leader.realname.substring(item.leader.realname.length - 2) }}</span></div>
                  </div>
                  <div class="businessCardContent">
                    <div style="margin-top: 10px">语祯物联科技(上海)有限公司</div>
                    <div class="massage" v-for="(card,cardIndex) in businessCardList" :key="'card' + cardIndex">
                      <span>{{ card.lable }}</span>
                      <p>{{ card.propData ? card.propData : '--' }}</p>
                    </div>
                  </div>
                </div>
                <div slot="reference" class="leaderBox">
                  <div  class="leaderLeft">
                    <div class="leaderImg">{{ item.leader && item.leader.realname.substring(item.leader.realname.length - 2) }}</div>
                    <div class="leaderName">
                      <p>{{ item.leader && item.leader.realname }}</p>
                      <p class="leader-post" :title="item.leader.post" :style="item.width == '200px' ? 'width: 77px' : ''">{{ item.leader && item.leader.post }}</p>
                    </div>
                  </div>
                  <div class="leader-tag">
                    <el-tag size="mini">负责人</el-tag>
                  </div>
                </div>

                <!-- <div class="leaderImg" slot="reference">{{ item.leader &&  item.leader.realname.substring(item.leader.realname.length - 2) }}</div> -->
              </el-popover>
              <!-- <div class="leaderName">
                <p>{{ item.leader &&  item.leader.realname.substring(item.leader.realname.length - 2) }}</p>
                <p class="leader-post">{{ item.leader && item.leader.post }}</p>
              </div> -->
            </div>

          </div>
        </div>
        <!--部门-->
        <div v-for="(dept, deptIdx) in item.depts" :key="deptIdx" :class="dept.selected ? 'dept-active' : ''" class="depts-list" @click="selectDept(dept, item.depts)">
          <div>
            <p>{{ dept.name }}</p>
            <p class="depts-peoplenum"><i class="el-icon-user-solid"></i><span>{{ dept.peopleNum }}</span></p>
          </div>
        </div>
        <!--该部门下的员工-->
        <div v-for="(users, usersIdx) in item.users" class="leader user-list" :key="'users' + usersIdx">
          <el-popover
            placement="left"
            width="300"
            @show="getBusinessCard(users)"
            trigger="click">
            <div class="businessCard">
              <div class="businessCardTitle">
                <div>
                  <p class="name">{{ users.realname }}</p>
                  <p class="address">语祯物联科技(上海)有限公司</p>
                </div>
                <div class="leaderImg"><span>{{ users.realname.substring(users.realname.length - 2) }}</span></div>
              </div>
              <div class="businessCardContent">
                <div style="margin-top: 10px">语祯物联科技(上海)有限公司</div>
                <div class="massage" v-for="(card,cardIndex) in businessCardList" :key="'card' + cardIndex">
                  <span>{{ card.lable }}</span>
                  <p>{{ card.propData ? card.propData : '--' }}</p>
                </div>
              </div>
            </div>
            <div class="leaderBox"  slot="reference" >
              <div  class="leaderLeft">
                <div class="leaderImg">{{ users.realname.substring(users.realname.length - 2) }}</div>
                <div class="leaderName">
                  <p>{{ users.realname }}</p>
                  <p class="leader-post" :title="users.post" :style="item.width == '200px' ? 'width: 120px' : ''">{{ users.post }}</p>
                </div>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getStructureDepts } from '@/api/oamanagement/addressBook'
export default {
  name: 'organizationStructure',
  components: {},
  props: {
    // 类型数据
    infoType: {
      type: String,
      default: ''
    },

    infoTitle: {
      type: String,
      default: ''
    },
    VStructureWidth: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      leftType: 'addressBookStructure',
      leftSides: [
        {
          name: '组织架构',
          crmType: 'salesEnter',
          infoType: 'addressBookStructure',
          hidden: false
        }
      ],
      deptId: null,
      structureLists: [],
      activeDeptIds: [],
      changeStyle: {
        width: '',
        height: ''
      },
      strclientWidth: null,
      num: 0,
      scrollleft: 0,
      businessCardList: []
    }
  },
  watch: {
    VStructureWidth: {
      handler(val) {
        if (val) {
          this.strclientWidth = val
          this.sizeChangeWidth(val)
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.getStructureList('first')
  },
  methods: {
    // 屏幕大小改变是宽度的变化
    sizeChangeWidth(widthSize) {
      if (this.structureLists.length > 0) {
        var structureWidth = (this.structureLists.length) * 200
        var index = this.structureLists.length - 1
        if (index == -1) {
          index = 0
        }
        if (structureWidth < widthSize) {
          this.structureLists[index].width = (widthSize - structureWidth + 200) + 'px'
          this.changeStyle.width = widthSize
        } else {
          this.structureLists[index].width = '200px'
          this.changeStyle.width = structureWidth
        }
      }
    },
    getStructureList(level) {
      getStructureDepts({
        deptId: this.deptId
      }).then(res => {
        var width = ''
        var boxWidth = document.getElementsByClassName('structure-content')[0].clientWidth
        if (this.strclientWidth == boxWidth) {
          boxWidth = this.strclientWidth - 7
        } else if ((this.strclientWidth - boxWidth) < 7) {
          boxWidth = this.strclientWidth - 7
        }
        width = boxWidth - (this.structureLists.length) * 200
        if (width < 200) {
          width = 200
          this.changeStyle.width = ((this.structureLists.length) * 200) + width
          this.num += 1
          // document.getElementsByClassName('address-menu')[0].style.width = ((this.structureLists.length) * 200) + width
          // console.log(((this.structureLists.length) * 200) + width)
        }
        for (var i = 0; i < this.structureLists.length; i++) {
          this.structureLists[i].width = '200px'
        }
        if (level == 'first') {
          for (var i = 0; i < res.data.depts.length; i++) {
            res.data.depts[i].level = 1
          }
        } else {
          for (var i = 0; i < res.data.depts.length; i++) {
            res.data.depts[i].level = level + 1
          }
        }
        this.structureLists.push({ depts: res.data.depts, leader: res.data.leader, users: res.data.users, width: width + 'px' })
      })
    },
    selectDept(item, fatherDept) {
      fatherDept.forEach(item => {
        delete item.selected
      })
      item.selected = true
      this.deptId = item.deptId
      var length = this.structureLists.length - item.level
      this.structureLists.splice(item.level, length)
      this.getStructureList(item.level)
      // document.getElementsByClassName('address-menu')[0].scrollLeft(document.getElementsByClassName('structure-content')[0].clientWidth - 200, 0)
      // console.log(document.getElementsByClassName('address-menu')[0].scrollWidth)
    },
    getBusinessCard(item) {
      this.businessCardList = [
        { lable: '姓名', propData: item.realname },
        { lable: '电话', propData: item.mobile },
        { lable: '邮箱', propData: item.email },
        { lable: '部门', propData: item.deptName },
        { lable: '职位', propData: item.post }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.address-menu{
  height: 100%;
  /*width: 2000px;*/
}
.title {
  width: 100%;
  padding: 0 20px;
  font-size: 16px;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #E6E6E6;
}
.structure-content{
  /*width: 2000px;*/
  height: calc(100% - 40px);
  overflow: auto;
  /*background-color: pink;*/
}
.contentList{
  border-right: 1px solid #E6E6E6;
  float: left;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar{
    width: 1px;
  }
  .leader{
    .leaderBox{
      height: 60px;
      margin: 0 20px;
      border-bottom: 1px solid #DEE0E3;
      display: flex;
      cursor: pointer;
      justify-content: space-between;
      .leaderLeft{
        display: flex;
        align-items: center;
        .leaderImg{
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border-radius: 50%;
          background-color: #3c8be3;
          color: #FFFFFF;
        }
        .leaderName{
          padding-left: 10px;
          .leader-post{
            font-size: 15px;
            padding-top: 5px;
            color: #BBBFC4;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
      }
      .leader-tag{
        display: flex;
        align-items: center;
      }
    }
  }
  .depts-list{
    height: 60px;
    border-bottom: 1px solid #FFFFFF;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20px;
    .depts-peoplenum{
      color: #BBBFC4;
      padding-top: 10px;
      span{
        padding-left: 10px;
      }
    }
  }
  .depts-list:hover{
    background-color: #DEE0E3;
  }
  .user-list{
    .leaderBox{
      border-bottom: 1px solid #FFFFFF!important;
    }
  }
  .leader:hover{
    background-color: #DEE0E3;
  }
  .user-list:hover{
    background-color: #DEE0E3;
  }
}
.contentNoLast{
  width: 230px;
  border-right: 1px solid #E6E6E6;
}
.dept-active{
  color: #3c8be3;
  border-bottom: 1px solid #3c8be3 !important;
}
  /*名片*/
  .businessCard{
    border-radius: 5px;
    border: 1px solid #E6E6E6;
    .businessCardTitle{
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background-color: #EBEEF2;
      .name{
        font-size: 22px;
        font-weight: 700;
        padding-bottom: 10px;
      }
      .leaderImg{
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        background-color: #3c8be3;
        color: #FFFFFF;
      }
    }
    .businessCardContent{
      padding: 0 15px;
      .massage{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        span{
          display: block;
          width: 100px;
          text-align: left;
          color: #B4B5B6;
        }
      }
    }
  }
</style>
